<script setup lang="ts">
interface Props {
  home: number
  away: number
  date?: any
  period?: number
  countDown?: any
}

enum Period {
  '上半场' = 0,
  '下半场' = 1,
  'HT'=-1
}

const props=withDefaults(defineProps<Props>(), {
  home: 0,
  away: 0,
  date: '2023/03/23 10:00',
  countDown: '',
  period: -1,
})
</script>

<template>
  <section class="scoreboard">
    <div class="score">{{ props.home }}</div>
    <div class="info">
      <div class="date">{{props.date}}</div>
      <div class="child" :class="{'split': props.countDown}">
        <div class="period">{{Period[props.period]}}</div>
        <div class="countdown">{{props.countDown}}</div>
      </div>
    </div>
    <div class="score">{{props.away}}</div>
  </section>
</template>

<style scoped>
.scoreboard{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 18px;
  transition: all .15s ease;
  border-radius: 16px;
  color: rgb(0, 0, 0);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: rgba(233, 233, 233, 0.85);
}
.info{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.score{
   font-size: 36px;
   font-weight: 700;
 }
.child{
  display: inline-flex;
}
.split{
  gap: 10px;
}
.period{
  font-weight: 700;
  color:rgba(0, 0, 0, 0.54);
}
.countdown{
  color: #b20a0a;
}
</style>